<script setup>
import { ref } from 'vue'
import { ElInput, ElButton, ElCard } from 'element-plus'
import { JsonViewer } from 'vue3-json-viewer'
import 'vue3-json-viewer/dist/index.css'
import axios from 'axios'
import { AgentMapAPI } from '../../api/BackendAPI'

// 服务器名称
const servHost = ref('')

const servInfoData = ref({})

const loading = ref(false)
// 获取服务器信息
const fetchAgentServInfoData = async (servHost) => {
  try {
    loading.value = true
    const encodedHost = encodeURIComponent(servHost)

    const response = await axios.get(`${AgentMapAPI.GET_AGENT_SERV_INFO}?host=${encodedHost}`)
    servInfoData.value = response.data.data
  } catch (error) {
    console.error('获取服务器数据失败:', error)
    // 可以添加错误提示
  } finally {
    loading.value = false
  }
}


// 修改点击事件处理函数
const handleServInfoSearch = () => {
  fetchAgentServInfoData(servHost.value)
}

</script>

<template>
  <el-card class="box-card" shadow="never" style="margin:10px;">
    <!-- 添加搜索区域 -->
    <div class="search-container">
      <el-input
        v-model="servHost"
        placeholder="请输入服务器名称或IP地址"
        class="search-input"
        clearable
        style="width: 400px;"
      />
      <el-button 
        type="primary" 
        @click="handleServInfoSearch"
        class="search-button"
        style="width: 100px;"
      >
        搜索
      </el-button>
    </div>

    <json-viewer
      v-if="servInfoData"
      :value="servInfoData"
      :expand-depth="2"
      copyable
      boxed
      style="width: 100%;"
    />
  </el-card>

</template>

<style scoped>


</style>